<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>张鑫旭</title>
</head>

<body>
    <!-- <canvas id="canvas" width="600" height="600"></canvas> -->
    <input type="file" id="file" multiple="multiple"> <!-- multiple可以上传多个文件 -->
    <script>
        var eleFile = document.querySelector('#file');
        var file = null;
        // html5以前不能读取本地文件，html5以后就可以
        // 如何上传一张大文件照片
        var reader = new FileReader();
        var img = new Image();
        var canvas = document.createElement('canvas');
        var context = canvas.getContext('2d');
        reader.onload = function (e) {
            // console.log(e.target.result);
            img.src = e.target.result;
            document.body.appendChild(img);
        }
        img.onload = function () {
            var originWidch = this.width;
            var originHeight = this.height;
            // 如何做文件的压缩
            console.log(originWidch, originHeight);
            var maxWidch = 400, maxHeight = 400; //限制大小
            var targetWidch = originWidch,
                targetHeight = originHeight;
            if (originWidch > maxWidch || originHeight > maxHeight) {
                if (originWidch / originHeight > maxWidch / maxHeight) {
                    targetWidch = maxWidch
                    targetHeight = Math.round(maxWidch * (originHeight / originWidch))
                } else {
                    targetHeight = maxHeight
                    targetWidch = Math.round(maxHeight * (originWidch / originHeight))
                }
            }
            console.log(targetWidch, targetHeight);
            canvas.width = targetWidch
            canvas.height = targetHeight
            context.drawImage(img, 0, 0, targetWidch, targetHeight)
            document.body.appendChild(canvas)
        }
        eleFile.addEventListener('change', function (event) {
            // console.log(event);
            file = event.target.files[0];
            console.log(file);
            // 图片
            if (file.type.indexOf('image') === 0) {
                reader.readAsDataURL(file)
            }
        })
        // const canvas = document.getElementById('canvas');
        // const ctx = canvas.getContext('2d');

        // // 设置圆心的位置,并将这个点初始化为原点(0,0)
        // ctx.translate(300, 300);
        // ctx.beginPath()
        // ctx.arc(0, 0, 100, 0, 2 * Math.PI)
        // ctx.stroke()
        // ctx.closePath()

        // ctx.beginPath()
        // ctx.arc(0, 0, 5, 0, 2 * Math.PI)
        // ctx.stroke()
        // ctx.closePaths()
    </script>
</body>

</html>